<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no, email=no">
    <meta name="HandheldFriendly" content="true">
    <title>QUI Demo</title>
    <script type="text/javascript" src="http://tajs.qq.com/stats?sId=37342703" charset="UTF-8"></script>

    
    <link rel="stylesheet" href="../../../../css/frozenui.css">
    <link rel="stylesheet" href="../../../css/style.css">
    

    
</head>

<body ontouchstart>
    <section class="ui-container">
        
<section id="grid">
    <h1 class="title">GRID</h1>
    <div class="demo-item">
        <p class="demo-desc">float网格适合多行</p>
        <div class="demo-block">
            <ul class="ui-row">
                <li class="ui-col ui-col-50">50</li>
                <li class="ui-col ui-col-50">50</li>
                <li class="ui-col ui-col-25">25</li>
                <li class="ui-col ui-col-75">75</li>
                <li class="ui-col ui-col-33">33</li>
                <li class="ui-col ui-col-67">67</li>
                <li class="ui-col ui-col-20">20</li>
                <li class="ui-col ui-col-80">80</li>
                <li class="ui-col ui-col-10">10</li>
                <li class="ui-col ui-col-90">90</li>
            </ul>
        </div>
    </div>
    <div class="demo-item">
        <p class="demo-desc">flex网格</p>
        <div class="demo-block">
            <div class="ui-row-flex ui-whitespace">
                <div class="ui-col ui-col">平均分</div>
                <div class="ui-col ui-col">平均分</div>
                <div class="ui-col ui-col">平均分</div>
                <div class="ui-col ui-col">平均分</div>
            </div>
            <div class="ui-row-flex ui-whitespace">
                <div class="ui-col ui-col-2">2/3</div>
                <div class="ui-col">1/3</div>
            </div>
            <div class="ui-row-flex ui-whitespace">
                <div class="ui-col ui-col-3">3/4</div>
                <div class="ui-col">1/4</div>
            </div>
            <div class="ui-row-flex ui-whitespace">
                <div class="ui-col ui-col-4">4/5</div>
                <div class="ui-col">1/5</div>
            </div>
            <div class="ui-row-flex ui-whitespace">
                <div class="ui-col ui-col-3">3/5</div>
                <div class="ui-col ui-col-2">2/5</div>
            </div>
    </div>
    </div>

    <div class="demo-item">
        <p class="demo-desc">竖排flex</p>
        <div class="demo-block">
            <div class="ui-row-flex ui-whitespace ui-row-flex-ver">
                <div class="ui-col">1/2</div>
                <div class="ui-col">1/2</div>
            </div>
            <br/>
            <div class="ui-row-flex ui-whitespace ui-row-flex-ver">
                <div class="ui-col ui-col-3">3/4</div>
                <div class="ui-col">1/4</div>
            </div>
        </div>
    </div>
    <div class="demo-item">
        <p class="demo-desc">三列(无交界线)</p>
        <div class="demo-block">

          <!--  -->
          <div class="ui-grid ui-grid-trisect">
              <ul class="ui-border-b">
                  <li>
                      <div class="ui-img-vertical">
                          <span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
                      </div>
                      <div class="ui-grid-info">
                        <h4>高尔夫<span>2.3M</span></h4>
                        <p>辅助信息</p>
                      </div>
                      <!-- <button class="ui-btn-s ui-btn-progress">免费</button> -->
                  </li>
                  <li>
                      <div class="ui-img-vertical">
                          <span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
                      </div>
                      <div class="ui-grid-info">
                        <h4>高尔夫<span>2.3M</span></h4>
                        <p>辅助信息</p>
                      </div>
                      <!-- <button class="ui-btn-s ui-btn-progress">免费</button> -->
                  </li>
                  <li>
                      <div class="ui-img-vertical">
                          <span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
                      </div>
                      <div class="ui-grid-info">
                        <h4>高尔夫<span>2.3M</span></h4>
                        <p>辅助信息</p>
                      </div>
                      <!-- <button class="ui-btn-s ui-btn-progress">免费</button> -->
                  </li>
                  <li>
                      <div class="ui-img-vertical">
                          <span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
                      </div>
                      <div class="ui-grid-info">
                        <h4>高尔夫<span>2.3M</span></h4>
                        <p>辅助信息</p>
                      </div>
                      <!-- <button class="ui-btn-s ui-btn-progress">免费</button> -->
                  </li>
              </ul>
          </div>

        </div>
    </div>
    <div class="demo-item">
        <p class="demo-desc">三列</p>
        <div class="demo-block">

          <!--  -->
          <div class="ui-grid ui-grid-trisect">
              <ul class="ui-border-b">
                  <li>
                      <div class="ui-img-vertical">
                          <span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
                      </div>
                      <div class="ui-grid-info ui-border-r">
                        <h4>高尔夫<span>2.3M</span></h4>
                        <p>辅助信息</p>
                      </div>
                      <!-- <button class="ui-btn-s ui-btn-progress">免费</button> -->
                  </li>
                  <li>
                      <div class="ui-img-vertical">
                          <span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
                      </div>
                      <div class="ui-grid-info ui-border-r">
                        <h4>高尔夫<span>2.3M</span></h4>
                        <p>辅助信息</p>
                      </div>
                      <!-- <button class="ui-btn-s ui-btn-progress">免费</button> -->
                  </li>
                  <li>
                      <div class="ui-img-vertical">
                          <span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
                      </div>
                      <div class="ui-grid-info ui-border-r">
                        <h4>高尔夫<span>2.3M</span></h4>
                        <p>辅助信息</p>
                      </div>
                      <!-- <button class="ui-btn-s ui-btn-progress">免费</button> -->
                  </li>
                  <li>
                      <div class="ui-img-vertical">
                          <span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
                      </div>
                      <div class="ui-grid-info ui-border-r">
                        <h4>高尔夫<span>2.3M</span></h4>
                        <p>辅助信息</p>
                      </div>
                      <!-- <button class="ui-btn-s ui-btn-progress">免费</button> -->
                  </li>
              </ul>
          </div>

        </div>
    </div>
    <div class="demo-item">
        <p class="demo-desc">两列</p>
        <div class="demo-block">
            <div class="ui-grid ui-grid-bisect">
                <ul>
                    <li>
                        <div class="ui-img-horizontal">
                            <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
                        </div>
                    </li>
                    <li>
                        <div class="ui-img-horizontal">
                            <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
                        </div>
                    </li>
                    <li>
                        <div class="ui-img-horizontal">
                            <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
                        </div>
                    </li>
                    <li>
                        <div class="ui-img-horizontal">
                            <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
                        </div>
                    </li>
                </ul>
          </div>
        </div>
    </div>
    <div class="demo-item">
        <p class="demo-desc">两列文字</p>
        <div class="demo-block">
          <div class="ui-grid ui-grid-bisect">
            <ul>
                <li>
                    <div class="ui-img-horizontal">
                        <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
                    </div>
                    <div class="ui-grid-info ui-border-r">
                      <h4>主要信息</h4>
                      <p>辅助信息</p>
                    </div>
                </li>
                <li>
                    <div class="ui-img-horizontal">
                        <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
                    </div>
                    <div class="ui-grid-info ui-border-r">
                      <h4>主要信息</h4>
                      <p>辅助信息</p>
                    </div>
                </li>
                <li>
                    <div class="ui-img">
                        <span style="background-image:url(http://placeholder.qiniudn.com/290x290)"></span>
                    </div>
                    <div class="ui-grid-info ui-border-r">
                      <h4>主要信息</h4>
                      <p>辅助信息</p>
                    </div>
                </li>
                <li>
                    <div class="ui-img">
                        <span style="background-image:url(http://placeholder.qiniudn.com/290x290)"></span>
                    </div>
                    <div class="ui-grid-info">
                      <h4>主要信息</h4>
                      <p>辅助信息</p>
                    </div>
                </li>
            </ul>
          </div>
        </div>
    </div>

    <div>
      <p class="demo-desc">banner位</p>
      <div class="ui-img-banner">
        <span style="background-image:url(http://placeholder.qiniudn.com/750x400)"></span>
      </div>
    </div>

    <div>
        <p class="demo-desc">cover位</p>
        <div class="ui-img-cover">
          <span style="background-image:url(http://placeholder.qiniudn.com/750x232)"></span>
        </div>
    </div>
    <div class="demo-item">
      <p class="demo-desc">横排图标网格</p>
      <div class="demo-block">
        <div class="ui-grid-icon ui-grid-icon-horizontal">
          <ul>
            <li>
              <div class="ui-img-icon">
                <span style="background-image:url(http://placeholder.qiniudn.com/80x80)"></span>
              </div>
                <h4>标题</h4>
            </li>
            <li>
              <div class="ui-img-icon">
                <span style="background-image:url(http://placeholder.qiniudn.com/80x80)"></span>
              </div>
             <h4>标题</h4>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="demo-item">
      <p class="demo-desc">三列图标网格</p>
      <div class="demo-block">
        <div class="ui-grid-icon ">
          <ul>
              <li>
                <div class="ui-img-icon">
                  <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
                </div>
                <h5>标题</h5>
                <p>副标题</p>

              </li>
              <li>
                <div class="ui-img-icon">
                  <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
                </div>
                <h5>标题</h5>
                <p>副标题</p>

              </li>
              <li>
                <div class="ui-img-icon">
                  <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
                </div>
                <h5>标题</h5>
                <p>副标题</p>

              </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="demo-item">
      <p class="demo-desc">四列图标网格</p>
      <div class="demo-block">
        <div class="ui-grid-icon ">
          <ul>
              <li>
                <div class="ui-img-icon">
                  <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
                </div>
                <h5>标题</h5>
                <p>副标题</p>

              </li>
            <li>
              <div class="ui-img-icon">
                <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
              </div>
              <h5>标题</h5>
              <p>副标题</p>

            </li>
            <li>
              <div class="ui-img-icon">
                <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
              </div>
              <h5>标题</h5>
              <p>副标题</p>

            </li>
            <li>
              <div class="ui-img-icon">
                <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
              </div>
              <h5>标题</h5>
              <p>副标题</p>

            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="demo-item">
      <p class="demo-desc">五列图标网格</p>
      <div class="demo-block">
        <div class="ui-grid-icon ">
          <ul>
            <li>
              <div class="ui-img-icon">
                <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
              </div>
              <h5>标题</h5>
              <p>副标题</p>

            </li>
            <li>
              <div class="ui-img-icon">
                <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
              </div>
              <h5>标题</h5>
              <p>副标题</p>

            </li>
            <li>
              <div class="ui-img-icon">
                <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
              </div>
              <h5>标题</h5>
              <p>副标题</p>

            </li>
            <li>
              <div class="ui-img-icon">
                <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
              </div>
              <h5>标题</h5>
              <p>副标题</p>

            </li>
            <li>
              <div class="ui-img-icon">
                <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
              </div>
              <h5>标题</h5>
              <p>副标题</p>

            </li>
          </ul>
        </div>
      </div>
    </div>
</section>

    </section>

    <script src="http://open.mobile.qq.com/sdk/qqapi.js?_bid=152"></script>
    <script>
    var _mtac = {};
    (function() {
        var mta = document.createElement("script");
        mta.src = "http://pingjs.qq.com/h5/stats.js?v2.0.2";
        mta.setAttribute("name", "MTAH5");
        mta.setAttribute("sid", "500421336");
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(mta, s);
    })();
    </script>

    
    <script src="../../../js/lib/zepto.min.js"></script>
    <script src="../../../js/index.js"></script>
    

    
</body>
</html>
